<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const user = {
            name: 'firefly',
            gender: 'male',
        }

        function fn(user) {
            return user.name + ' is ' + user.gender;
        }

        // JSX赋值给遍历
        const element1 = <h1>{fn(user)}</h1>;
        const element2 = (
            <h2>
                {user.name} is {user.gender}
            </h2>
        );
        const element3 = <h3>{3 + 4}</h3>
        
        const ele = (
            <div>
                {element1}
                {element2}
                {element3}
            </div>
        );

        function returnfn(user) {
            if (user) {
                // 返回一个被JSX赋值的遍历ele
                return ele;
            }
            // 直接返回JSX表达式
            return <h1>not found</h1>
        }

        const result = returnfn(user);
        // 将ele渲染到DOM中去
        ReactDOM.render(result, document.getElementById('root'))
    </script>
</body>
</html>